<template>
    <el-card class="recommend-post-box-card" shadow="hover">
        <div slot="header" class="clearfix">
            <span class="title">推荐</span>
        </div>
        <div v-if="postList.length!==0">
            <div v-for="post in postList" :key="post.id" class="item">
                <post-item :post="post"
                           :link="link"
                           @changeLabelAttention="changeLabelAttention"></post-item>
            </div>
        </div>
        <div v-else class="item">
            没有帖子可以推荐给您
        </div>
    </el-card>
</template>

<script>
    import PostItem from '@/components/post/PostItem'

    export default {
        name: 'recommendPostCard',
        components: {
            PostItem
        },
        props: {
            postList: {
                type: Array,
                required: true
            },
            link: {
                type: Boolean,
                required: false,
                default: false
            }
        },
        methods: {
            changeLabelAttention (data) {
                if (this.link) {
                    this.$emit('changeLabelAttention', data)
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .item {
        margin-bottom: 18px;
    }

    .clearfix {

        .title {
            float: left;
            font-weight: bolder;
            font-size: 32px;
            color: rgba(83, 95, 255, 0.67);

            margin-left: 32px;
        }

    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    .recommend-post-box-card {
        margin: 32px auto;
        background: linear-gradient(rgba(255, 178, 160, 0.6), rgba(70, 198, 255, 0.6), rgba(129, 167, 255, 0.6), rgba(226, 129, 255, 0.6));
    }
</style>
